<template>
  <div class="financial-statement">
    <div class="financial-tab">
      <div class="tab-wrapper">
        <div
            class="tab-item"
            :class="activeTab === item.value && 'active'"
            v-for="item in tabs"
            :key="item.value"
            @click="changeTab(item)"
        >
          {{ item.label }}
        </div>
      </div>
      <span>单位：万元</span>
    </div>
    <!--表格-->
    <el-table
        :data="tableData"
        v-loading="loading"
        :height="tableHieght"
        row-key="id"
        border
        header-row-class-name="bg-th"
        default-expand-all
    >
      <el-table-column :label="getFirstClumnlabel()" prop="val0" min-width="150"/>
      <el-table-column label="2022-12-31" prop="val1"/>
      <el-table-column label="2021-12-31" prop="val2"/>
      <el-table-column label="2020-12-31" prop="val3"/>
      <el-table-column label="2019-12-31" prop="val4"/>
      <el-table-column label="2018-12-31" prop="val5"/>
    </el-table>
  </div>
</template>

<script>
import { table1Columns, table2Columns, table3Columns, getTableData } from './mock'

export default {
  name: "FinancialStatement",
  data() {
    return {
      tabs: [
        {
          label: '利润表',
          value: 0
        },
        {
          label: '资产负债表',
          value: 1
        },
        {
          label: '现金流量表',
          value: 2
        },
      ],
      tableHieght: 500,
      activeTab: 0,
      tableData: [],
      loading: false,
    }
  },
  mounted() {
    this.changeTab(this.tabs[0])
    this.$nextTick(() => {
      this.tableHieght = document.body.offsetHeight - 380
    })
  },
  methods: {
    changeTab(item) {
      this.activeTab = item.value
      const columns = [table1Columns, table2Columns, table3Columns]
      this.tableData = getTableData(columns[item.value])
    },
    getFirstClumnlabel() {
      return `楚江新材002171.SZ] - ${ this.tabs[this.activeTab].label }`
      //(单位:万元, CNY)
    }
  }
}
</script>

<style scoped lang="scss">
.financial-statement {
  width: 100%;

  .financial-tab {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .tab-wrapper {
      display: flex;
      align-items: center;
      margin-right: 15px;

      .tab-item {
        width: auto;
        padding: 0 16px;
        height: 40px;
        border-bottom: 2px solid transparent;
        color: #5C6775;
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        cursor: pointer;

        &.active {
          //background-color: rgba(58, 117, 255, 0.0627450980392157);
          border-radius: 5px 5px 0 0;
          border-color: rgba(58, 117, 255, 1);
          color: #3A75FF;
        }
      }
    }

    span {
      font-size: 14px;
      color: #5C6775;
    }
  }
}
</style>

<style lang="scss">
.bg-th th {
  background-color: #f4f5f7;
  font-size: 14px;
  font-weight: normal;
  color: #242424;
}
</style>
